<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="styles/conv_styles.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="scripts/data_container.js"></script>

    <script type="text/javascript">

    /* View state variables */
                var filter_enum = {
                    "unfiltered": 0,
                    "all_filtered": 1,
                    "byKeywords": 2,
                    "byPeople": 3
                }

                var sort_enum = {
                    "byNameDesc": 0,
                    "byNameAsc": 1,
                    "byRateDesc": 2,
                    "byRateAsc": 3,
                    "byDateDesc": 4,
                    "byDateAsc": 5
                }


                var view_state = {
                    "filteredBy": filter_enum.unfiltered,
                    "sortedBy": sort_enum.byNameAsc
                }



/* Data model manipulations */
                function sortNodesByRateDesc(x,y){
                    return y.RATEBYANNO-x.RATEBYANNO;
                }

                function sortNodesByRateAsc(x,y){
                    return x.RATEBYANNO-y.RATEBYANNO;
                }

                function sortNodesByNameDesc(x,y){
                    var x_name = author_name_byId(x.PERSONID);
                    var y_name = author_name_byId(y.PERSONID);
                    return y_name.charAt(0)> x_name.charAt(0);
                }

                function sortNodesByNameAsc(x,y){
                    var x_name = author_name_byId(x.PERSONID);
                    var y_name = author_name_byId(y.PERSONID);
                    return x_name.charAt(0)> y_name.charAt(0);
                }

               function sortNodesByDateDesc(x,y){
                    var x_date_text = x.DATECREATED;
                    var x_tokens = x_date_text.split("-");
                    var x_date = new Date(x_tokens[0],x_tokens[1]-1,x_tokens[2]);

                    var y_date_text = y.DATECREATED;
                    var y_tokens = y_date_text.split("-");
                    var y_date = new Date(y_tokens[0],y_tokens[1]-1,y_tokens[2]);

                    return x_date < y_date;
                }

               function sortNodesByDateAsc(x,y){
                    var x_date_text = x.DATECREATED;
                    var x_tokens = x_date_text.split("-");
                    var x_date = new Date(x_tokens[0],x_tokens[1]-1,x_tokens[2]);

                    var y_date_text = y.DATECREATED;
                    var y_tokens = y_date_text.split("-");
                    var y_date = new Date(y_tokens[0],y_tokens[1]-1,y_tokens[2]);

                    return x_date > y_date;
                }



                function display_comments(){
                    var containerDiv = document.getElementById("container");
                    containerDiv.innerHTML = "";
                    switch(view_state.sortedBy)
                    {
                        case sort_enum.byNameDesc:
                            comments.sort(sortNodesByNameDesc);
                            break;
                        case sort_enum.byNameAsc:
                            comments.sort(sortNodesByNameAsc);
                            break;
                        case sort_enum.byRateDesc:
                            comments.sort(sortNodesByRateDesc);
                            break;
                        case sort_enum.byRateAsc:
                            comments.sort(sortNodesByRateAsc);
                            break;
                         case sort_enum.byDateDesc:
                            comments.sort(sortNodesByDateDesc);
                            break;
                        case sort_enum.byDateAsc:
                            comments.sort(sortNodesByDateAsc);
                            break;
                        default:
                    }

                    
                    switch(view_state.filteredBy)
                    {
                        case filter_enum.unfiltered:
                            generate_comments(unfiltered, null);
                            break;
                        case filter_enum.all_filtered:
                            generate_comments(all_filtered, null);
                            break;
                        case filter_enum.byKeywords:
                            generate_comments(filter_keywords,getKeywords()) ;
                            break;
                        case filter_enum.byPeople:
                            generate_comments(filter_people,getSelectedPeople()) ;
                            break;
                        default:                 
                    }
                }

                function generate_comments(filter, params){
                    for(var i=0; comments.length; i++){
                        var curRootNode = comments[i];
                        generate_rootnode_view(curRootNode,filter,params);
                    }
                }

/* Filters */
                function unfiltered(node, params){
                    return true;
                }

               function all_filtered(node, params){
                    return false;
               }

               function filter_people(node, params){
                   var people = params;
                   for(var i = 0; i<people.length; i++){
                       if(node.PERSONID==people[i])
                           return true;
                   }
                   return false;

               }

               function filter_keywords(node, params){
                   var keywords = params;
                   var annot = node.ANNOTATIONBODY;
                   for(var i = 0; i<keywords.length; i++){
                       if(annot.search(keywords[i])!=-1)
                           return true;
                   }
                   return false;

               }
/*View generation */
                function generate_rootnode_view(root, filter, params){

                    root.firstChild = root.CHILDREN[0];
                    root.visited = false;
                    root.parentNode = null;
                    root.isInit = false;
                    root.level = 0;
                    var node = root;

                    while(node){
                          if(!node.isInit)
                                initializeChildren(node);

                          if(node.visited) {
                             node.visited = false;
                             if(node==root)
                                 break;
                             if(node.nextSibling)
                                 node = node.nextSibling;
                             else
                                 node = node.parentNode;
                          }
                          else{
                              if(filter(node,params))
                                outputComment(node);
                              else
                                outputFilteredComment(node);
                              if(node.firstChild){
                                  node.visited = true;
                                  node = node.firstChild;
                              }
                              else if(node.nextSibling)
                                  node = node.nextSibling;
                              else
                                  node = node.parentNode;
                          }
                            
                    }
                }



                function outputComment(node){
                    var commentContent = document.createElement('div');

                    var commentHeadline = document.createElement('div');
                    commentHeadline.innerHTML = author_name_byId(node.PERSONID);
                    commentHeadline.className = 'headline';
                    
                    var commentText = document.createElement('div');
                    commentText.innerHTML = node.ANNOTATIONBODY;
                    commentText.className = 'comment_text';

                    var commentVars = document.createElement('div');
                    commentVars.className = "comment_vars";

                    var spanDate = document.createElement('span');
                    spanDate.innerHTML = node.DATECREATED;
                    spanDate.className = "date";

                    var spanRating = document.createElement('span');
                    spanRating.innerHTML = "Rating:"+node.RATEBYANNO;
                    spanRating.className = "rating";

                    commentVars.appendChild(spanDate);
                    commentVars.appendChild(spanRating);

                    commentContent.appendChild(commentHeadline);
                    commentContent.appendChild(commentText);
                    commentContent.appendChild(commentVars);

                    commentContent.className = "comment_content";
                    commentContent.style.marginLeft = node.level*20+"px";
                    document.getElementById("container").appendChild(commentContent);
                }

                function outputFilteredComment(node){
                    var commentContent = document.createElement('div');
                    commentContent.className = "filtered_comment comment_content";

                    var commentHeadline = document.createElement('div');
                    commentHeadline.innerHTML = author_name_byId(node.PERSONID);
                    commentHeadline.className = 'headline comment_vars';


                    var spanDate = document.createElement('span');
                    spanDate.innerHTML = node.DATECREATED;
                    spanDate.className = "date";

                    var spanRating = document.createElement('span');
                    spanRating.innerHTML = "Rating:"+node.RATEBYANNO;
                    spanRating.className = "rating";

                    commentHeadline.appendChild(spanDate);
                    commentHeadline.appendChild(spanRating);

                    commentContent.appendChild(commentHeadline);

                    commentContent.style.marginLeft = node.level*30+"px";
                    document.getElementById("container").appendChild(commentContent);
                }

                function initializeChildren(node){
                    if(node.CHILDREN.length>0){
                        node.firstChild = node.CHILDREN[0];
                        for(var i =0; i<node.CHILDREN.length-1; i++){
                            node.CHILDREN[i].parentNode = node;
                            node.CHILDREN[i].nextSibling = node.CHILDREN[i+1];
                            node.CHILDREN[i].level = node.level+1;
                        }
                        node.CHILDREN[node.CHILDREN.length-1].nextSibling=null;
                        node.CHILDREN[node.CHILDREN.length-1].parentNode=node;
                        node.CHILDREN[node.CHILDREN.length-1].level=node.level+1;
                    }
                    else{
                        node.firstChild = null;
                    }
                    node.isInit = true;
                }


/* Controls */

                function changeFilter(filter_state){
                    view_state.filteredBy = filter_state;
                    display_comments();
                }

                function changeSort(sort_state){
                    view_state.sortedBy = sort_state;
                    display_comments();
                }

                function getSelectedPeople(){
                    var selectedPeople = new Array();
                    var selectList = document.getElementById("people");
                    for(var i=0; i<selectList.options.length; i++){
                        if(selectList.options[i].selected==true)
                            selectedPeople.push(selectList.options[i].value);
                    }
                    return selectedPeople;
                }

                function getKeywords(){
                    var keywords = document.getElementById("keywords").value;
                    return keywords.split(" ");
                }

/* Helper functions */
                function author_name_byId(id){
                    for(var i=0; i<authors.length; i++){
                        var current_author = authors[i];
                        if(current_author.PERSONID == id){
                            return current_author.NAME;
                        }
                    }
                    return "Author Unknown";
                }

                function hasChildren(node){
                    return node.CHILDREN.length >0? true:false;
                }

                function test_tree(){
                    display_comments(sortNodesByNameDesc, filter_keywords, ["my"]);

                }

/*Comment state */
		function getCurrentNodeId(elem){
			return elem.parentNode.parentNode.getAttribute('id');
		}

		function hide_snip(id){
			var node = document.getElementById(id);
			var children = node.getElementsByTagName("div");
			for(var i =0; i<children.length; i++){
				var current = children[i];
				if(current.className == "Snippet")
					current.style.display="none";
			}

		}

		function max_snip(id){
			var node = document.getElementById(id);
			var children = node.getElementsByTagName("div");
			for(var i =0; i<children.length; i++){
				var current = children[i];
				if(current.className == "Snippet")
					current.style.display="block";
			}

		}

		function testFun(){
			window.alert("It's working");
		}

		</script>
  </head>
  <body onload="display_comments()">
      <div id="control_panel" style="float:left;width:200px;clear:both;margin-right: 30px;">
          Control panel:<br/>
          <select id="people" multiple style="width:200px">
              <option value="21">Keen</option>
              <option value="22">Ilia</option>
              <option value="23">Samaneh</option>
              <option value="24">Chong</option>              
          </select>
          <br/>
          <button type="button" onClick="changeFilter(filter_enum.byPeople)">Filter people</button><br/>
          <textarea id="keywords" rows="1" cols="20"></textarea><br/>
          <button type="button" onclick="changeFilter(filter_enum.byKeywords)">Filter keywords</button><br/>
          <ul class="horizontal" id="sort-by">
			<li><b>Sort by</b></li>
			<li><input type="radio" name="sort" onchange="changeSort(sort_enum.byNameDesc)">Name Descending</li>
                        <li><input type="radio" name="sort" onchange="changeSort(sort_enum.byNameAsc)">Name Ascending</li>
                        <li><input type="radio" name="sort" onchange="changeSort(sort_enum.byRateDesc)">Rate Descending</li>
			<li><input type="radio" name="sort" onchange="changeSort(sort_enum.byRateAsc)">Rate Ascending</li>
                        <li><input type="radio" name="sort" onchange="changeSort(sort_enum.byDateDesc)">Date Descending</li>
			<li><input type="radio" name="sort" onchange="changeSort(sort_enum.byDateAsc)">Date Ascending</li>
          </ul>
      </div>

      <div id="container" style="float:left">
          Output:<br/>
      </div>
       <!-- <div class="Node" id="23445">
                <div class="Author">Author: SomeName</div>
                <div class="Controls"><span onClick="hide_snip(getCurrentNodeId(this));" >Hide</span><span onClick="test_tree();;" >Min</span> <span onClick="max_snip(getCurrentNodeId(this));" >Max</span></div>
                <div class="Snippet">Most software development today is a team activity. Project team members collaboratively work on the tasks necessary to accomplish the various project milestones. The work is usually asynchronous, not orchestrated by any explicit workflow, sometimes geographically distributed, and involves the use of a variety of tools which do not always interoperate. Version-control repositories are essential in supporting this collaboration but cannot satisfactorily address the problem of traceability of interdependencies among the artifacts produced by the individual tools. In the WikiDev 2.0 collaboration tool, we address these problems by adopting a wiki as the central platform in which to integrate information about the various artifacts of interest, to cluster this information in clusters of relevant artifacts, and to present views on this information that cut across the individual tool boundaries.</div>
        </div>-->
  </body>
</html>
